<template>
   <view>
        <van-image width="100%" height="250" src="http://101.37.175.158:8888/images/bg1.jpg" id="vimg" />
        <view class="kuang1">
            <text class="nihao">你好  {{mine}}</text>
            <view class="zhunbei">准备好开启灵感寻味之旅了吗？</view>
            <view class="card">
                <view class="top">
                    <text class="GO">GO会员</text>
                    <text class="cheng">成为星球会员享双倍积分</text>
                    <view class="lv">Lv1</view>
                    <van-image id="tou" round width="5rem" height="5rem" 
                    :src="imgSrc"/>
                </view>
                <view class="bottom">
                    <view @click="Tojifen">
                        <van-icon name="send-gift-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">积分商城</view>
                    </view>
                    <view @click="Tojifen">
                        <van-icon name="bookmark-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">喜茶好券</view>
                    </view>
                    <view>
                        <van-icon name="pending-payment" class="icon" size="50px" />
                        <view class="yuan1">￥O.OO</view>
                        <view class="zi">我的钱包</view>
                    </view>
                    <view>
                        <van-icon name="gift-card-o" class="icon" size="50px" />
                        <view class="yuan">O</view>
                        <view class="zi">阿喜有礼</view>
                    </view>
                </view>
            </view>
            <!--  -->
            <view class="bo">星球播报</view>
            <!--  -->
            <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" circular="true" :duration="duration">
                        <swiper-item >
                            <view class="swiper-item uni-bg-red one">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                src="http://101.37.175.158:8888/images/kafei.jpg" />
                                <view class="wenzi1">生日有喜，今天你最大</view>
                                <view class="wenzi2">你的生日喜茶，我们优先制作</view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-green two">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                src="http://101.37.175.158:8888/images/kafei2.jpg" />
                                <view class="wenzi1">灵感咖啡，喜茶出品</view>
                                <view class="wenzi2">雪山香草拿铁&雪山摩卡上线</view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="swiper-item uni-bg-blue three">
                                <van-image round width="3rem" class="tu1" height="3rem"
                                src="http://101.37.175.158:8888/images/cha.jpg" />
                                <view class="wenzi1">权益延期，长喜常安</view>
                                <view class="wenzi2">会员身份及喜茶券有效期延长事宜</view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
            <!--  -->
            <view class="renwu">
                <view class="left">
                    <text class="mm1">任务中心</text>
                    <text class="mm2">MISSION CENTER</text>
                </view>
                <view class="right">
                    <van-image  width="9.1rem" height="9.1rem"
                    src="http://101.37.175.158:8888/images/renwu.jpg" />
                </view>
            </view>
            <!--  -->
            <view class="libao">
                <view class="lbtop">
                    <view class="kaitong">开通礼包</view>
                    <view class="gengduo" @click="more">更多</view>
                </view>
                <!--  -->
                <view class="vbig">
                    <view class="big">
                        <view class="quan">
                            <van-icon name="hot-o" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">优先享券</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="logistics" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">免运费券</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="birthday-cake-o" size="70" color="#755D4D" />
                        </view>
                        <text class="yi">买一赠一</text>
                    </view>
                    <view class="big">
                        <view class="quan">
                            <van-icon name="paid" size="75" color="#755D4D" />
                        </view>
                        <text class="yi">买二赠一</text>
                    </view>

                </view>
                <!--  -->
            </view>
            <!--  -->
            <view class="huiyuanma" @click="Tohuiyuan">
                <view class="h1">会员码</view>
                <view class="h2">门店扫码积分、喜茶钱包和阿喜有礼卡支付</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <!-- ------------------------------------ -->
            <van-popup :show="show" >
                <view id="popup">
                    <view></view>
                   <view @click="onClose" style="float:right"><van-icon name="cross" size="30" /></view>
                   <view class="dui d1">您想要兑换？</view>
                   <view class="dui d2"><van-icon name="discount" size="24" />喜茶券</view>
                   <view class="dui d3"><van-icon name="friends-o" size="24"/>星球会员</view>
                   <view class="dui d4"><van-icon name="point-gift-o" size="24" />阿喜有礼</view>
                </view>
                   
            </van-popup>
            <!-- ------------------------------------ -->
            <view class="huiyuanma" @click="showPopup">
                <view class="h1">兑换中心</view>
                <view class="h2">兑换星球会员、喜茶券和阿喜有礼卡  </view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" @click="Todingdan">
                <view class="h1">我的订单</view>
                <view class="h2">星球会员尊享订单记录，更多惊喜等着您</view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view> 
            <view class="huiyuanma" @click="news">
                <view class="h1">消息中心</view>
                <view class="h2"></view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
            <view class="huiyuanma" @click="more">
                <view class="h1">更多</view>
                <view class="h2"></view>
                <van-icon name="arrow" color="#C3C4C8" />
            </view>
        </view>
   </view>
</template>
<script>
export default {
    name:'mine',
    data(){
        return{
            mine:'松拉马',
            background: ['color1', 'color2', 'color3'],
            indicatorDots: false,
            autoplay: true,
            interval: 5000,
            duration: 500,
            show:false,
            imgSrc:'http://101.37.175.158:8888/images/touxiang.jpg'
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        },
        Tohuiyuan(){
            uni.navigateTo({
                url:'../huiyuan/huiyuan'
            })
        },
        duihuan(){
            console.log(111)
        },
        news(){
            uni.navigateTo({
                url:'../news/new'
            })
        },
        more(){
            uni.navigateTo({
                url:'../more/more'
            })
        },
        showPopup() {
            this.show = true 
        },

        onClose() {
            this.show = false 
        },
        Todingdan(){
            uni.switchTab({
                url:'../dingdan/dingdan'
            })
        },
        Tojifen(){
            uni.navigateTo({
                url:'../index/wdjf'
            })
        }
    },
    onLoad(){
        uni.request({
            url:'http://101.37.175.158:8888/jn',
            method:'get',
            success (res){
                console.log(res.data);
            }
        })
    }


}
</script>
<style  scoped>
    /* #vimg{
        width: 100%;
        height: 300rpx;
    } */
    
.imagesize{
    display:flex;                    
    justify-content: center;         
}
.kuang1{
    margin: 0 30rpx 0 30rpx;
}
.nihao{
    font-size: 20px;
    color: #41291F;
}
.zhunbei{
    font-size: 14px;
    color: #41291F;
}
.card{
    margin-top: 15rpx;
    width: 100%;
    height: 350rpx;
    box-shadow: -2rpx 5rpx  10rpx 10rpx rgb(241, 240, 240);
}
.top{
    margin: 0 20rpx;
    position: relative;
    border-bottom: 1px solid rgb(233, 231, 231);
    height: 120rpx;
}
.bottom{
    margin: 0 40rpx;
    display: flex;
    justify-content:space-between;
}

.GO{
    font-size: 20px;
    color: #41291F;
    font-weight: 500;
    display: inline-block;
    padding-top: 20rpx;
}
.cheng{
    display: inline-block;
    font-size: 12px;
    width: 320rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    margin-left: 15rpx;
    border-radius: 20rpx;
    color: #41291F;
    background-color: rgb(228, 226, 226);
}
#tou{
    position: absolute;
    right: 10rpx;
    top: -70rpx;
}
.lv{
    position: absolute;
    width: 70rpx;
    font-size: 12px;
    line-height: 30rpx;
    text-align: center;
    height: 30rpx;
    border: 1px solid #41291F;
    border-radius: 8rpx;
}
.icon{
    color: #97928F;
    font-weight: 100;
    margin-left: 10rpx;
}
.yuan{
    color: #41291F;
    margin-left: 50rpx;
    font-weight: 600;
}
.yuan1{
    color: #41291F;
    font-weight: 600;
}

.zi{
    margin-top: 15rpx;
    font-style: 12px;
    color: #343434;
}
.one{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.two{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.three{
    width: 100%;
    position: relative;
    height: 200rpx;
    margin-top: 20rpx;
    background-color: #F8F8F8;
}
.bo{
    margin-top: 30rpx;
}
.tu1{
    position: absolute;
    top: 50rpx;
    left: 50rpx;
}
.wenzi1{
    position: absolute;
    top: 65rpx;
    font-weight: 400;
    left: 180rpx;
    font-style: 14px;
    color: #41291F;
}
.wenzi2{
    position: absolute; 
    left: 180rpx;
    top: 115rpx;
    font-size: 10px;
    color: #41291F;
}
.renwu{
    width: 100%;
    height: 300rpx;
    display: flex;
    background-color: #fff;
    box-shadow: -4rpx 10rpx  15rpx 15rpx rgb(241, 240, 240);
}
.mm1{
    width: 100%;
    height: 40rpx;
    font-size: 12px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    color: #422A20;
}
.mm2{
    width: 100%;
    height: 40rpx;
    text-align: center;
    font-size: 10px;
    color: #422A20;
    font-family: inherit;
}
.left{
    width: 55%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.right{
    width: 45%;
    height: 100%;
}
.libao{
    margin-top: 80rpx;
    width: 100%;
    height: 350rpx;
    margin-bottom: 50rpx;
}
.lbtop{
    display: flex;
    justify-content: space-between;
}

.gengduo{
    color: #5C5C5C;
    font-size: 14px;
}
.quan{
    width: 150rpx;
    height: 150rpx;
    text-align: center;
    line-height: 200rpx;
    box-shadow: -2rpx 5rpx  10rpx 10rpx rgb(241, 240, 240);
    border-radius: 150rpx;
}
.yi{
    position: absolute;
    left: 15rpx;
    top: 180rpx;
    font-size: 14px;
}
.big{
    position: relative;
    margin-top: 30rpx;
}
.vbig{
    display: flex;
    justify-content: space-around;
}
.huiyuanma{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 120rpx;
    border-bottom: 1px solid #EFF2F5;
}
.h1{
    width: 23%;
    line-height: 120rpx;
}
.h2{
    width: 75%;
    font-size: 12px;
    line-height: 120rpx;
    text-align: right;
    color: #C3C4C8;
    padding-right: 20rpx;
}
#popup{
    width: 400rpx;
    height: 500rpx;
    position: relative;
}
.dui{
    position: absolute;
}
.d1{
    font-size: 20px;
    text-align: center;
    line-height: 65rpx;
    width: 280rpx;
    height: 65rpx;
    top: 60rpx;
    left: 60rpx;
}
.d2{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 160rpx;
    left: 60rpx;
    border: 1px solid black;
}
.d3{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 270rpx;
    left: 60rpx;
    border: 1px solid black;
}
.d4{
    text-align: center;
    width: 280rpx;
    height: 65rpx;
    top: 380rpx;
    left: 60rpx;
    border: 1px solid black;
}
</style>